<template>
  <div>
    <a-modal
      :width="820"
      title="打卡日期"
      :visible="show"
      :destroy-on-close="true"
      @cancel="$emit('handleDateShow', false)"
      @ok="handleData"
    >
      <a-form class="lab_l form_l">
        <a-form-item label="日期" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-date-picker
            :value="needPunchDate.daily ? moment(`${needPunchDate.daily}`, 'YYYY-MM-DD') : needPunchDate.daily"
            :allow-clear="false"
            @change="dateChange"
          />
        </a-form-item>
        <!-- 打卡时间 -->
        <a-form-item label="打卡时间" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-row v-for="(item, i) in needPunchDate.periodList" :key="i">
            <span class="mg_r10">上班</span>
            <a-time-picker
              :value="item.startPeriod ? moment(`${item.startPeriod}`, 'HH:mm') : item.startPeriod"
              format="HH:mm"
              :allow-clear="false"
              @change="(time, timeString) => onWorkChange(time, timeString, i)"
            />
            -<span class="mg_r10">下班</span>
            <a-time-picker
              :value="item.endPeriod ? moment(`${item.endPeriod}`, 'HH:mm') : item.endPeriod"
              format="HH:mm"
              :allow-clear="false"
              @change="(time, timeString) => offWorkChange(time, timeString, i)"
            />
            <a-icon
              v-if="needPunchDate.periodList.length < 2 && i < 1"
              class="addIcon"
              type="plus-circle"
              style="font-size: 18px; margin-left: 10px"
              @click="add"
            />
            <a-icon
              v-if="needPunchDate.periodList.length > 1 && i >= 1"
              class="deleteIcon"
              type="delete"
              style="font-size: 18px; margin-left: 10px"
              @click="del"
            />
          </a-row>
          <a-row v-if="needPunchDate.periodList">
            <a-checkbox v-model="needPunchDate.periodList[0].hasRestPeriod">
              休息时间
            </a-checkbox>
            <span class="sub_tit">休息时间不算工作时长</span>
            <div v-if="needPunchDate.periodList[0].hasRestPeriod">
              <span class="mg_r10">开始</span>
              <a-time-picker
                :default-value="moment('12:00', 'HH:mm')"
                format="HH:mm"
                :value="
                  needPunchDate.restPeriod.startPeriod
                    ? moment(`${needPunchDate.restPeriod.startPeriod}`, 'HH:mm')
                    : needPunchDate.restPeriod.startPeriod
                "
                :allow-clear="false"
                @change="onRestChange"
              />
              <span> - </span>
              <span class="mg_r10">结束</span>
              <a-time-picker
                :default-value="moment('13:00', 'HH:mm')"
                format="HH:mm"
                :value="
                  needPunchDate.restPeriod.endPeriod
                    ? moment(`${needPunchDate.restPeriod.endPeriod}`, 'HH:mm')
                    : needPunchDate.restPeriod.endPeriod
                "
                :allow-clear="false"
                @change="offRestChange"
              />
            </div>
          </a-row>
        </a-form-item>
        <!-- 事由 -->
        <a-form-item label="事由" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-input v-model="needPunchDate.reason" placeholder="写点什么..." />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const initNeed = {
  daily: moment().format("YYYY-MM-DD"),
  reason: "",
  periodList: [
    {
      startPeriod: "09:00",
      endPeriod: "18:00",
      type: true,
      sort: 0,
      hasRestPeriod: false
    }
  ],
  restPeriod: {
    startPeriod: "12:00",
    endPeriod: "13:00",
    type: false,
    sort: 0
  }
};
import moment from "moment";
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    needPunchDate: {
      type: Object,
      default: initNeed
    },
    handleNeedList: {
      type: Function,
      default: () => {}
    },
    editDateIndex: {
      type: Number,
      default: -1
    },
    handleDateShow: {
      type: Function,
      default: () => {}
    }
  },

  methods: {
    /* 上班时间 */
    onWorkChange(time, timeString, i) {
      if (timeString === "") return;
      if (timeString) this.needPunchDate.periodList[i].startPeriod = timeString;
    },
    /* 下班时间 */
    offWorkChange(time, timeString, i) {
      if (timeString === "") return;
      if (timeString) this.needPunchDate.periodList[i].endPeriod = timeString;
    },

    handleData() {
      this.$emit("handleNeedList", this.needPunchDate, this.editDateIndex);
      this.$emit("handleDateShow", false);
    },
    /* 日期 */
    dateChange(item, string) {
      if (string === "") return;
      this.needPunchDate.daily = string;
    },
    onRestChange(time, timeString) {
      if (timeString === "") return;
      this.needPunchDate.restPeriod.startPeriod = timeString;
    },
    offRestChange(time, timeString) {
      if (timeString === "") return;
      this.needPunchDate.restPeriod.endPeriod = timeString;
    },
    add() {
      this.needPunchDate.periodList.push({
        startPeriod: "09:00",
        endPeriod: "18:00",
        type: true,
        sort: 0,
        hasRestPeriod: false
      });
    },
    del() {
      this.needPunchDate.periodList.pop();
    }
  }
};
</script>
<style lang="scss" scoped>
.form_l {
  margin-left: 50px;
}
</style>
